<template>
    <div class="my-cs-box">
         <my-head></my-head>
    <div class="loading">
      <van-loading type="spinner" color="#1989fa" v-if="it" />
    </div>
        <div v-if="!it">
        <van-index-bar :index-list="indexList" v-if="crr">
             <van-index-anchor index="定位">定位城市</van-index-anchor>
              <div class="End">定位失败，请稍后重试</div>

                <van-index-anchor index="热门">热门城市</van-index-anchor>
              <div class="hot">
                <ul>
                  <li v-for="(item,index) in hot"
                  :key="index"
                  >
                    {{item}}
                  </li>
                </ul>
              </div>

        <van-index-anchor   index="A ">A</van-index-anchor>
        <van-cell  v-for="item in crr[0].ss"  :key="item.py" :title="item.nm"  @click="a(item.nm,item.id)"   />
        

        <van-index-anchor index="B">B</van-index-anchor>
        <van-cell v-for="item in crr[1].ss"  :key="item.py" :title="item.nm"  @click="a(item.nm,item.id)" />
        

        <van-index-anchor index="C">C</van-index-anchor>
        <van-cell v-for="item in crr[2].ss"  :key="item.py" :title="item.nm" @click="a(item.nm,item.id)" />

        

        <van-index-anchor index="D">D</van-index-anchor>
        <van-cell v-for="item in crr[3].ss"  :key="item.py" :title="item.nm" @click="a(item.nm,item.id)" />

        

        <van-index-anchor index="E">E</van-index-anchor>
        <van-cell v-for="item in crr[4].ss"  :key="item.py" :title="item.nm" @click="a(item.py)" />


        

        <van-index-anchor index="F">F</van-index-anchor>
        <van-cell v-for="item in crr[5].ss"  :key="item.py" :title="item.nm"  @click="a(item.nm,item.id)"/>

        

        <van-index-anchor index="G">G</van-index-anchor>
        <van-cell v-for="item in crr[6].ss"  :key="item.py" :title="item.nm"  @click="a(item.id)" />

        

        <van-index-anchor index="H">H</van-index-anchor>
        <van-cell v-for="item in crr[7].ss"  :key="item.py" :title="item.nm" @click="a(item.nm,item.id)"/>

        

        <van-index-anchor index="J">J</van-index-anchor>
        <van-cell v-for="item in crr[8].ss"  :key="item.py" :title="item.nm" @click="a(item.nm,item.id)"/>

        

        <van-index-anchor index="K">K</van-index-anchor>
        <van-cell v-for="item in crr[9].ss"  :key="item.py" :title="item.nm" @click="a(item.nm,item.id)"/>

        

        <van-index-anchor index="L">L</van-index-anchor>
        <van-cell v-for="item in crr[10].ss"  :key="item.py" :title="item.nm" @click="a(item.nm,item.id)"/>

        

        <van-index-anchor index="M">M</van-index-anchor>
        <van-cell v-for="item in crr[11].ss"  :key="item.py" :title="item.nm" @click="a(item.nm,item.id)"/>

        

        <van-index-anchor index="N">N</van-index-anchor>
        <van-cell v-for="item in crr[12].ss"  :key="item.py" :title="item.nm" @click="a(item.nm,item.id)"/>

        

        <van-index-anchor index="P">P</van-index-anchor>
        <van-cell v-for="item in crr[13].ss"  :key="item.py" :title="item.nm" @click="a(item.nm,item.id)"/>

        

        <van-index-anchor index="Q">Q</van-index-anchor>
        <van-cell v-for="item in crr[14].ss"  :key="item.py" :title="item.nm" @click="a(item.nm,item.id)"/>

        

        <van-index-anchor index="R">R</van-index-anchor>
        <van-cell v-for="item in crr[15].ss"  :key="item.py" :title="item.nm" @click="a(item.nm,item.id)"/>

        

        <van-index-anchor index="S">S</van-index-anchor>
        <van-cell v-for="item in crr[16].ss"  :key="item.py" :title="item.nm" @click="a(item.nm,item.id)"/>

        

        <van-index-anchor index="T">T</van-index-anchor>
        <van-cell v-for="item in crr[17].ss"  :key="item.py" :title="item.nm" @click="a(item.nm,item.id)"/>

        

        <van-index-anchor index="W">W</van-index-anchor>
        <van-cell v-for="item in crr[18].ss"  :key="item.py" :title="item.nm" @click="a(item.nm,item.id)"/>

        

        <van-index-anchor index="X">X</van-index-anchor>
        <van-cell v-for="item in crr[19].ss"  :key="item.py" :title="item.nm" @click="a(item.nm,item.id)"/>

        

        <van-index-anchor index="Y">Y</van-index-anchor>
        <van-cell v-for="item in crr[20].ss"  :key="item.py" :title="item.nm" @click="a(item.nm,item.id)"/>

        

        <van-index-anchor index="Z">Z</van-index-anchor>
        <van-cell v-for="item in crr[21].ss"  :key="item.py" :title="item.nm" @click="a(item.nm,item.id)"/>

        
        

        </van-index-bar>









        </div>
</div>
</template>
<script>
import myHead from"../components/headRuten.vue";
export default {
    components:{
        myHead
    },
  data() {
    return {
      indexList: [
        '定位','热门',
      'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N', 'P', 'Q', 'R', 'S', 'T', 'W', 'X', 'Y', 'Z'
      ],
      arr: null, //数字数组
      brr: [], //存字母数组
      crr: [],
      hot: null,
      it:true,
    };
  },
  methods:{
      a(a,b){
          console.log(b);
          this.$store.commit("chengShi",a)
          this.$store.commit("chengShiID",b)
          this.$router.push("/")
          
      },
      time(){
          let dd =setInterval(() => {
             this.it =false
             window.clearInterval(dd)
          }, 3000);
      }
  },
  created() {
    let arr = axios.get("https://apis.netstart.cn/maoyan/cities.json");
    arr.then((re) => {
      console.log(re,"re");
      this.hot = re.data.hot;
      console.log(this.hot,"hot");
      this.arr = re.data.cts;
      console.log(this.arr);
      this.arr.forEach((item) => {
        this.brr.push(item.py.slice(0, 1));
      });

    //   console.log(this.brr);
      let cdd = [...new Set(this.brr)];

      // 排序abcd
      cdd.sort((a, b) => {
        return a.charCodeAt(0) - b.charCodeAt(0);
      });

      console.log(cdd, "arr");
      console.log(this.indexList);
      cdd.forEach((item) => {
        let obj = {};
        obj.cs = item;
        obj.ss = [];
        this.crr.push(obj);
      });
      console.log(this.crr);
      this.crr.forEach((item) => {
        this.arr.forEach((items) => {
          if (item.cs == items.py.slice(0, 1)) {
            item.ss.push(items);
          }
        });
      });
      console.log(this.crr);
    });
    this.time()
     
  },
};
</script>
<style lang="less">
.my-cs-box{
    .loading{
        display: inline-block;
        text-align: center;
        margin-left: 50%;
        transform: translateX(-50%);
    }

    .van-index-bar{
      .End{
       width: 45%;
       height: 30px;
      border: .02rem solid #e6e6e6;
      background: #fff;
       font-size: 15px;
       margin: 10px;
       text-align: center;
       border-radius: .06rem;
       margin-left: 4%;
       line-height: 30px;
       box-sizing: border-box;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .hot{
        color: black;
        ul{
          display: flex;
          flex-wrap: wrap;
          li{
            flex-basis: 23%;
            // width: 30%;
             height: 30px;
            border: .02rem solid #e6e6e6;
            background: #fff;
            font-size: 15px;
            margin: 10px;
            text-align: center;
            border-radius: .06rem;
            margin-left: 4%;
            line-height: 30px;
            box-sizing: border-box;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;

          }
        }
      }
      .van-index-anchor{
        background-color: #EBEBEB;
      }
    }

}
</style>